<template>
  <div>
    <h2>首页 Home</h2>
    <p>这里是首页内容</p>
    <!-- 显示后端返回的数据 -->
    <p>后端接口返回：{{ message }}</p>

    <router-link to="/about">去About页面</router-link>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'

// 响应式变量存放接口返回内容
const message = ref('')

// 页面挂载完成后调用接口
onMounted(async () => {
  try {
    const response = await axios.get('/api/hello') // 调用/api/hello
    message.value = response.data
  } catch (error) {
    console.error('接口调用失败:', error)
    message.value = '接口调用失败'
  }
})
</script>
